<template>
  <div class="echarts" style="position:relative;" >
    <div :style="{height:'51vh',width:'100%'}" ref="myEchart" style="margin-top:-5vh"></div>
    <div class="map_ident"   v-show="showarea">
       <ul class="ident_left">
				 		<p>{{city}}运行情况</p>
            <li><h1>订单数 (个)</h1><a>{{arealist.orderNum}}</a></li>
						<li><h1>车辆数(辆))</h1><a>{{arealist.vehicleNum}}</a></li>
						<li><h1>跨区域出行数(次)</h1><a>{{arealist.outNum}}</a></li>
						<li><h1>运行费用(万元)</h1><a>{{arealist.runMoney}}</a></li>
        </ul>
				<ul class="ident_left">
				 		<p>{{city}}车辆资产</p>
           <li><h1>车辆编制 (辆)</h1><a>{{arealist.vehiclePlanNum}}</a></li>
						<li><h1>车辆报废数(辆)</h1><a>{{arealist.vehicleDumpNum}}</a></li>
						<li><h1>车辆新增数(辆)</h1><a>{{arealist.vehicleAddedNum}}</a></li>
						<li><h1>车辆超编数(辆)</h1><a>{{arealist.vehicleBeyondNum	}}</a></li>
        </ul>
    </div>
		<div class="order_ident"   v-show="showarea">
       <ul class="ident_right">
				 		<p>{{city}}区域订单展示</p>
					 <li><h1>订单编号</h1><a>目的城市</a></li>
           <li v-for="(item, index) in orderlist"  >
               <h1>{{item.name}}</h1><a>{{item.to}}</a> 
           </li>
        </ul>
    </div>
  </div>
</template>
<script>
  import echarts from "echarts";
	 import data from '../charts/map.json'
	 import {getRegionmapData} from "@/api/data";
    import '../../../node_modules/echarts/map/js/province/xinjiang.js'
    //import '../charts/china.js' // 引入中国地图数据
  export default {
    name: "ChartMap",
    props: ["userJson"],
    data() {
      return {
        showarea:true,
				chart: null,
				city:"",
				timer: null,
        arealist:[
				 {"name":"乌鲁木齐市","sex":"50","show":false}	
				],
				citycode:"650100",
				orderlist:[]
      };
    },
    mounted() {
			this.city ="红福天";
			this.chinaConfigure();
			 this.arealist = data['省直机关'].count;
			  this.orderlist = data['省直机关'].order;
				this.setTimer();
				this.getDatas();
		},


destroyed(){
            if(this.timer) { //如果定时器在运行则关闭
                clearInterval(this.timer); 
            }
        },

    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
			getDatas(){
        getRegionmapData({
					cityCode:this.citycode
				}).then(res =>{
					if(res.code == 200){
						this.arealist = res.data ;
						console.log(	this.arealist);
					}else{
						this.arealist = [];
					}
				})
			},
			setTimer: function () {
       var items = ['嘉峪关市','酒泉市','白银市','武威市','天水市','陇南市'];
　　　　this.timer = setInterval( () => {
          this.orderlist=[{
         "name": '2019121100'+Math.floor(Math.random()*10),
         "from":this.city,
         "to":items[Math.floor(Math.random()*items.length)]
       },
       {
        "name": '2019121100'+Math.floor(Math.random()*10),
         "from":this.city,
         "to":items[Math.floor(Math.random()*items.length)]
       }, 
       {
        "name": '2019121100'+Math.floor(Math.random()*10),
         "from":this.city,
         "to":items[Math.floor(Math.random()*items.length)]
			 },
			  {
        "name": '2019121100'+Math.floor(Math.random()*10),
         "from":this.city,
         "to":items[Math.floor(Math.random()*items.length)]
       }, 
       {
        "name": '2019121100'+Math.floor(Math.random()*10),
         "from":this.city,
         "to":items[Math.floor(Math.random()*items.length)]
       }]
　　　　　　}, 6000)

　　},

      chinaConfigure() {
				var vm = this;
				
				let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
				myChart.on('click', function (params) {
					console.log(params);
				var city = params.name;  
						vm.city = city; 
						vm.citycode = params.data.regioncode;
					  vm.getDatas();
            if(data[city] !==undefined){
						vm.showarea = true;
						// vm.arealist = data[city].count;
						vm.orderlist = data[city].order
					}else{
							vm.arealist = [];
							vm.showarea =false;
							
					}
						//  this.$store.dispatch("setCityName", city);



				});
        window.onresize = myChart.resize;

        var geoCoordMap = {
        '乌鲁木齐': [87.617733,43.792818],
        '克拉玛依市': [84.873946,45.595886],
        '吐鲁番市':[89.184078,42.947613],
        '哈密市':[93.51316,42.833248],
        '昌吉回族自治州':[87.304012,44.014577],
        '博尔塔拉蒙古自治州':[82.074778,44.903258],
        '巴音郭楞蒙古自治州':[86.150969,41.768552],
        '阿克苏地区':[80.265068,41.170712],
        '克孜勒苏柯尔克孜自治州':[76.172825,39.713431],
        '喀什地区':[75.989138,39.467664],
        '和田地区':[79.92533,37.110687],
        '伊犁哈萨克自治州':[81.317946,43.92186],
        '塔城地区':[82.985732,46.746301],
        '阿勒泰地区':[88.13963,47.848393],
        '石河子市':[86.041075,44.305886],
        '阿拉尔市':[81.285884,40.541914],
        '图木舒克市':[79.077978,39.867316],
        '五家渠市':[87.526884,44.167401],
        '北屯市':[87.824932,47.353177],
        '铁门关市':[85.501218,41.827251],
        '双河市':[82.353656,44.840524],
        '可克达拉市':[80.63579,43.6832],
        '昆玉市':[79.287372,37.207994],
        '胡杨河市':[84.8275959,44.69288853],
      };
      /* 
	记录下起点城市和终点城市的名称，以及权重
	数组第一位为终点城市，数组第二位为起点城市，以及该城市的权重，就是图上圆圈的大小
   */
    // 重庆
    var XJData = [
      [{name: '兰州'}, {name: "陇南",value: 90}],
			[{name: '兰州'}, {name: "天水",value: 90}],
			 [{name: '张掖'}, {name: "武威",value: 90}],
			 	 [{name: '酒泉'}, {name: "嘉峪关",value: 90}],
    ];

    // 广州
    var GZData = [
			[{name: '嘉峪关'}, {name: "庆阳",value: 90}],
			[{name: '嘉峪关'}, {name: "张掖",value: 90}],
    ];

    // 南宁
    var NNData = [
      [{name: '武威'}, {name: "兰州",value: 90}],
    ];
    // 小飞机的图标，可以用其他图形替换
 var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

// var planePath = '';


// 获取地图中起点和终点的坐标，以数组形式保存下来
var convertData = function(data) {
	var res = []; 
	for(var i = 0; i < data.length; i++) {
		var dataItem = data[i];
		var fromCoord = geoCoordMap[dataItem[1].name];
		var toCoord = geoCoordMap[dataItem[0].name];
		if(fromCoord && toCoord) {
			res.push([{
				coord: fromCoord // 起点坐标
			}, {
				coord: toCoord // 终点坐标
			}])
		}
	}
	return res;
}
var color  = ['#ffae00', '#dcbf71'];
// var color  = ['#eed403', '#dcbf71'];	// 自定义图中要用到的颜色
var series = [];						// 用来存储地图数据

/*
	图中一共用到三种效果，分别为航线特效图、飞机航线图以及城市图标涟漪图。
	要用到setOption中的series属性，并且对每个城市都要进行三次设置。
*/
[['兰州', XJData],['广州', GZData],['南宁', NNData]].forEach(function(item, i) {
	series.push(	
   {
		     name: '平台数',
        type: 'map',
        map: '新疆',
        geoIndex: 1,
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
            normal: {
								show: true,
								 textStyle: {
										color: '#fff',
                }
            },
            emphasis: {
                show: true,
                textStyle: {
										color: '#fff',
                }
            }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#006fff',
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                areaColor: '#f3780a'
            }
				},
			 data: [ 
                 {
                "name": "乌鲁木齐",
								"value": 0,
								"regioncode":"650100"
              },{
                "name": "克拉玛依市",
								"value": 1,
								 "regioncode": "650200",
              }, {
                "name": "吐鲁番市",
								"value": 2,
								 "regioncode": "650400",
								// itemStyle: {normal: { areaColor: '#40BAE8',}},
			  }, 
			  {
                 "name": "哈密市",
			 					"value": 3,
								 "regioncode": "650500",
		                        // itemStyle: {normal: { areaColor: '#40BAE8',}},
			   }, 
			   {
                "name": "昌吉回族自治州",
								"value": 4,
								 "regioncode": "652300",
              },
              
			   {
                "name": "博尔塔拉蒙古自治州",
								"value": 5,
								"regioncode": "652700",
              },
               {
                "name": "巴音郭勒蒙古自治州",
								"value": 6,
								"regioncode": "652800",
              },
               {
                "name": "阿克苏地区",
								"value": 7,
								 "regioncode": "652900",
								
              },
               {
                "name": "克孜勒苏柯尔克孜自治州",
								"value": 8,
								 "regioncode": "653000",
              },
               {
                "name": "喀什地区",
								"value": 9,
								 "regioncode": "653100",
			  },
			    {
                "name": "阿勒泰地区",
								"value": 10,
								 "regioncode": "654300",
			  },
			    {
                "name": "石河子市",
								"value": 11,
								 "regioncode": "659001",
			  },
			    {
                "name": "阿拉尔市",
								"value": 12,
								 "regioncode": "659002",
			  },
			    {
                "name": "图木舒克市",
								"value": 13,
								 "regioncode": "659003",
			  },
			    {
                "name": "伊利哈萨克自治州",
								"value": 14,
								 "regioncode": "654000",
			  },
			    {
                "name": "塔城地区",
								"value": 15,
								 "regioncode": "654200",
			  },
			    {
                "name": "五家渠市",
								"value": 16,
								 "regioncode": "659004",
			  },
			    {
                "name": "北屯市",
								"value": 17,
								 "regioncode": "659005",
			  },
			    {
                "name": "铁门关市",
								"value": 18,
								 "regioncode": "659006",
			  },
			    {
                "name": "双河市",
								"value": 19,
								 "regioncode": "659007",
			  },
			    {
                "name": "可克达拉市",
								"value": 20,
								 "regioncode": "659008",
			  },
			    {
                "name": "昆玉市",
								"value": 21,
								 "regioncode": "659009",
			  },
			   {
                "name": "和田地区",
								"value": 22,
								 "regioncode": "653200",
			  },
			    {
                "name": "胡杨河市",
								"value": 23,
								 "regioncode": "659010",
              },
              
              ]	
    },
		{
			name:"",
		// 白色航线特效图
		type: 'lines',    
		zlevel: 1,                    // 用于分层，z-index的效果
		// effect: {
		// 	show: true,               // 动效是否显示
		// 	period: 6,                // 特效动画时间
		// 	trailLength: 0.7,         // 特效尾迹的长度
		// 	color: 'rgba(238,212,3,0.1)',            // 特效颜色
		// 	symbolSize: 3  ,
		// 		opacity: 0.4        // 特效大小
		// },
		// lineStyle: {
		// 	normal: {                 // 正常情况下的线条样式
		// 		color: 'rgba(238,212,3,0.1)',
		// 		width:3,             // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
		// 		curveness: -0.2 ,
		// 			opacity: 0.4,     // 线条曲度
		// 	}
		// },
		effect: {
			show: true,               // 动效是否显示
			period: 6,                // 特效动画时间
			trailLength: 0.7,         // 特效尾迹的长度
			color: '#fff',            // 特效颜色
			symbolSize: 3             // 特效大小
		},
		lineStyle: {
			normal: {                 // 正常情况下的线条样式
				color: color[0],
				width: 0,             // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
				curveness: -0.2       // 线条曲度
			}
		},
		data: convertData(item[1])    // 特效的起始、终点位置
	}, {  // 小飞机航线效果
		type: 'lines',
		zlevel: 2,
		//symbol: ['none', 'arrow'],   // 用于设置箭头
		symbolSize: 10,
		// effect: {
		// 	show: true,
		// 	period: 6,
		// 	trailLength: 0,
		// 	symbol: planePath,         // 特效形状，可以用其他svg pathdata路径代替
		// 	symbolSize: 15             
		// },
		// lineStyle: {
		// 	normal: {
		// 		color: 'rgba(238,212,3,0.6)',
		// 		width: 1,
		// 		opacity: 0.6,
		// 		curveness: -0.2
		// 	}
		// },
		effect: {
			show: true,
			period: 6,
			trailLength: 0,
			symbol: 'none', 
        // 特效形状，可以用其他svg pathdata路径代替
			symbolSize: 15             
		},
		lineStyle: {
			normal: {
				color: color[0],
				width:1,
				opacity: 0.6,
				curveness: -0.2
			}
		},
		data: convertData(item[1])     // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
	}, { // 散点效果
		name:"",
		type: 'effectScatter',         
		coordinateSystem: 'geo',       // 表示使用的坐标系为地理坐标系
		zlevel: 3,
		rippleEffect: {
			brushType: 'stroke'        // 波纹绘制效果
		},
		label: {
			normal: {                  // 默认的文本标签显示样式
				show: true,
				position: 'left',      // 标签显示的位置
				formatter: '{b}'       // 标签内容格式器
			}
		},
		itemStyle: {
			normal: {
				color: color[0]
			}
		},
		data: item[1].map(function(dataItem) {
			return {
				// name: dataItem[1].name,
				value: geoCoordMap[dataItem[1].name],  // 起点的位置
				symbolSize: dataItem[1].value / 8,  // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
			};
		})
	});
});

// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
series.push({
	type: 'effectScatter',
	coordinateSystem: 'geo',
	zlevel: 3,
	rippleEffect: {
		brushType: 'stroke'
	},
	label: {
		normal: {
			show: true,
			position: 'left',
			formatter: '{b}'
		}
	},
	symbolSize: function(val) {
		return val[2] / 8;
	},
	itemStyle: {
		normal: {
			color: color[1]
		}
	},
	// data: [{  
	// 	// 这里面的数据，由于一开始就知道终点位置是什么，所以直接写死，如果通过ajax来获取数据的话，还要进行相应的处理
	// 	name: "兰州",
	// 	value: [103.82 ,36.07],
	// 	label: {
	// 		normal: {
	// 			position: 'top'
	// 		}
	// 	}
	// }, {
	// 	name: '张掖',
	// 	value: [113.5107, 23.2196, 30],
	// 	label: {
	// 		normal: {
	// 			position: 'right'
	// 		}
	// 	}
	// }, {
	// 	name: '南宁',
	// 	value: [108.479, 23.1152, 30]
	// }]
});

        myChart.setOption({ // 进行相关配置
        backgroundColor: 'rgba(0,0,0,0)',//画布背景颜色
          //  tooltip: {
              
          //  }, // 鼠标移到图里面的浮动提示框
         title: {
						text: '',
						textStyle: {
							color: 'red',
							fontSize: 40
						},
						top: '0px',
						left: '0px'
					},
					tooltip:{
						 show: true,  
							formatter:function(params){
								if(params.data.value == undefined||params.data.name == undefined){
									var res =" ";
									return res;
								}else{
	                      var res=params.name +'<br />'+params.seriesName+":"+params.data.value;
                        //定义一个变量来保存series数据系列
                       
                        return res;
								}
						     
							}

					} ,
					
      geo: {
         map: '新疆',       // 与引用进来的地图js名字一致
				 roam: false,    
				     // 禁止缩放平移
         label: {
              normal: {
                show: false, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
         itemStyle: {        // 每个区域的样式 
           normal: {
					    	areaColor: 'rgba(0,0,0,1)',
					     borderWidth:3,//设置外层边框
                borderColor:'#84b8ff',
                shadowColor: 'rgba(60,115,255,0.6)',
                shadowBlur: 50
          },
          emphasis: {
            color:'green',
            areaColor: '#F3B839',
          }
		     },
		    
	    },
      series: series,   // 将之前处理的数据放到这里   
      textStyle: {
	    	fontSize: 12
     	}    
        });

      }
    }
  }
</script>
<style>

.map_ident{
 position:absolute;
 width:50%;
 height:auto;
 /* background-color:rgba(255,255,255,0.1); */
 /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
 left:10px;
 bottom:20px;
}
.order_ident{
 position:absolute;
 width:30%;
 height:auto;
 /* background-color:rgba(255,255,255,0.1); */
 /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
 right:0px;
 top:9%;
}
.order_ident p{
 width:100%;
	text-align:center;
	 overflow:hidden;
	 padding:1vh 0;
	line-height:2vh;
	color:#c3cad9;
	font-size:14px;
}
.ident_right{
	width:100%;
	height:auto;
	border:solid 1px rgba(101,124,168,0.1);
	border-bottom:none;
}
.ident_right li{
	width:100%;
  overflow:hidden;
	border-bottom:solid 1px rgba(101,124,168,0.1);
	text-align:center;
	line-height:3vh;
	color:#c3cad9;
}
.ident_right li h1{
	width:50%;
	float:left;
  height:auto;
	 overflow:hidden;
	font-size:13.2px;	
	border-right:solid 1px rgba(101,124,168,0.1);
}
.ident_right li span{
	width:33%;
	float:left;
  height:auto;
	 overflow:hidden;
	font-size:13.2px;	
	border-right:solid 1px rgba(101,124,168,0.1);
}
.ident_right li a{
	color:#d33847;
}
.ident_right li:nth-child(2){
	background-color:rgba(231,233,240,0.05);
}
.ident_right li:nth-child(2) a{
	color:#c3cad9;
}
.ident_left{
	width:49%;
	height:auto;
	float:left;
	border:solid 1px rgba(101,124,168,0.1);
	border-bottom:none;
}
.ident_left p{
	width:100%;
	text-align:center;
	 overflow:hidden;
	 padding:1vh 0;
	line-height:3vh;
	background-color:rgba(231,233,240,0.05);
	color:#c3cad9;
}
.ident_left li{
	width:100%;
  overflow:hidden;
	border-bottom:solid 1px rgba(101,124,168,0.1);
	text-align:center;
	line-height:5vh;
}
.ident_left li h1{
	width:62%;
	float:left;
  height:auto;
	 overflow:hidden;
	font-size:13.2px;	
	border-right:solid 1px rgba(101,124,168,0.1);
	color:#c3cad9;
	font-weight:normal;
}
.ident_left li a{
	color:#d33847;
	font-size:14px;
}
</style>